<!-- 
ImageData 对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：

width
    图片宽度，单位是像素
height
    图片高度，单位是像素
data
    Uint8ClampedArray类型的一维数组，
    包含着RGBA格式的整型数据，范围在0至255之间（包括255）。
    data属性返回一个 Uint8ClampedArray，它可以被使用作为查看初始像素数据。
    每个像素用4个1bytes值(按照红，绿，蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。
    每个颜色值部份用0至255来代表。
    每个部份被分配到一个在数组内连续的索引，左上角像素的红色部份在数组的索引0位置。
    像素从左到右被处理，然后往下，遍历整个数组。

Uint8ClampedArray  包含高度 × 宽度 × 4 bytes数据，索引值从0到(高度×宽度×4)-1


//创建像素容器
ctx.createImageData(width, height);
getImageData(left, top, width, height);

//渲染像素容器
ctx.putImageData(myImageData, dx, dy);
-->
<html>

<head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
        function onLoad() {
            var img = new Image();
            img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
            img.onload = function () {
                draw(this);
            };

            function draw(img) {
                var canvas = document.getElementById('canvas');
                var ctx = canvas.getContext('2d');
                ctx.drawImage(img, 0, 0);
                img.style.display = 'none';
                var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
                var data = imageData.data;

                var invert = function () {
                    for (var i = 0; i < data.length; i += 4) {
                        data[i] = 255 - data[i];     // red
                        data[i + 1] = 255 - data[i + 1]; // green
                        data[i + 2] = 255 - data[i + 2]; // blue
                    }
                    ctx.putImageData(imageData, 0, 0);
                };

                var grayscale = function () {
                    for (var i = 0; i < data.length; i += 4) {
                        var avg = (data[i] + data[i + 1] + data[i + 2]) / 3;
                        data[i] = avg; // red
                        data[i + 1] = avg; // green
                        data[i + 2] = avg; // blue
                    }
                    ctx.putImageData(imageData, 0, 0);
                };

                var invertbtn = document.getElementById('invertbtn');
                invertbtn.addEventListener('click', invert);
                var grayscalebtn = document.getElementById('grayscalebtn');
                grayscalebtn.addEventListener('click', grayscale);
            }
        }
    </script>
    <style type="text/css">
        canvas {
            border: 1px solid black;
        }
    </style>
</head>

<body onload="onLoad();">
    <canvas id="canvas" width="500" height="500"></canvas>
    <form>
        <input type="radio" id="original" name="color" value="original" checked="">
        <label for="original">Original</label>

        <input type="radio" id="grayscale" name="color" value="grayscale">
        <label for="grayscale">Grayscale</label>

        <input type="radio" id="inverted" name="color" value="inverted">
        <label for="inverted">Inverted</label>

        <input type="radio" id="sepia" name="color" value="sepia">
        <label for="sepia">Sepia</label>
    </form>
</body>

</html>